<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯大学</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="wrap">
        <!-- 头部 -->
        <div class="header-top">
            <!-- 头部：上 -->
            <div class="w clearfix">
                <h1 class="fl">
                    <img src="./images/logo.jpg" alt="">
                </h1>
                <div class="kpcollege fl">
                    <a href="#">开平学院</a>
                </div>
                <div class="search fr">
                    <input type="text" class="search-input" placeholder="云平台 社交网络 运营数据">
                    <span class="search-icon">
                        <i class="iconfont icon-chazhao"></i>
                    </span>
                </div>
            </div>
        </div>

        <!-- 头部：下 -->
        <div class="header-bot">
            <div class="w clearfix">
                <ul class="header-bot-list">
                    <li>
                        <a href="#">
                            <i class="iconfont icon-shouye"></i>
                            学院首页
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            线下培训
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            在线课程
                        </a>
                    </li>
                </ul>
                <ul class="header-bot-list fr">
                    <li class="clear-bg">
                        <a href="#">
                            <i class="iconfont icon-xiaoxi"></i>
                            开发者论坛
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-up"></i>
                            课程提交
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- banner -->
        <div class="banner">
            <img src="./images/banner.jpg" alt="">
            <div class="pre-live w">
                <p>
                    <i class="iconfont icon-laba"></i>
                    直播预告：直播还没开始哦，看看我们的推荐吧！
                </p>
            </div>
        </div>

        <!-- content -->
        <div class="content">
            <div class="w">
                <!-- 最新线下培训&推荐 -->
                <div class="train clearfix">
                    <!-- 副标题 -->
                    <h2 class="title">
                        最新线下培训
                    </h2>
                    <!-- 推荐 -->
                    <div class="recommend fr">
                        <h2 class="title-right">
                            推荐
                        </h2>
                        <ul class="recommend-list">
                            <li>
                                腾讯创业训练营[广州]互联...
                            </li>
                            <li>
                                腾讯创业训练营[广州]互联...
                            </li>
                            <li>
                                腾讯创业训练营[广州]互联...
                            </li>
                            <li>
                                腾讯创业训练营[广州]互联...
                            </li>
                            <li>
                                腾讯创业训练营[广州]互联...
                            </li>
                        </ul>
                    </div>
                    <!-- 线下培训详情 -->
                    <div class="train-detail fl">
                        <img src="./images/offline.jpg" alt="">
                        <div class="train-text fl">
                            <p class="text-t">
                                《一步之遥》新闻发布会
                            </p>
                            <p class="text-cont">
                                主题：青春励志创业<br>
                                时间：6月12日10:00-12:00<br>
                                地点：上海展览中心
                            </p>
                            <span class="check-detail">查看详情</span>
                        </div>
                        <div class="train-text fl">
                            <p class="text-t">
                                《一步之遥》新闻发布会
                            </p>
                            <p class="text-cont">
                                主题：青春励志创业<br>
                                时间：6月12日10:00-12:00<br>
                                地点：上海展览中心
                            </p>
                            <span class="check-detail">查看详情</span>
                        </div>
                        <div class="train-text fl">
                            <p class="text-t">
                                《一步之遥》新闻发布会
                            </p>
                            <p class="text-cont">
                                主题：青春励志创业<br>
                                时间：6月12日10:00-12:00<br>
                                地点：上海展览中心
                            </p>
                            <span class="check-detail">查看详情</span>
                        </div>
                    </div>
                </div>
                <!-- 二维码区域 -->
                <div class="qrcode">
                    <p>手机看直播学干货</p>
                    <img src="./images/qrcode.jpg" alt="">
                    <p>关注腾讯大学公号</p>
                </div>
                <!-- 在线学习&热门课程 -->
                <div class="study clearfix">
                    <!-- 在线学习标题 -->
                    <h2 class="title">
                        在线学习
                        <span class="more fr">更多</span>
                    </h2>
                    <!-- 热门课程标题 -->
                    <h2 class="title-right fr">
                        热门课程
                    </h2>
                    <!-- 在线学习内容 -->
                    <div class="study-box fl clearfix">
                        <div class="study-box-content fl">
                            <h3>
                                <img src="./images/appin.jpg" alt="">
                                <span>应用接入</span>
                            </h3>
                            <img class="fl" src="./images/app.jpg" alt="">
                            <p class="caption fl">
                                腾讯开发者沙龙[上海站]圆桌对话...
                            </p>
                            <p class="caption-p fl">
                                圆桌对话：腾讯开放策略下，游戏开发者如何获益？
                            </p>
                            <ul class="app-list fl">
                                <li>
                                    <span>
                                        营销推广
                                    </span>
                                    <a href="#">
                                        腾讯开发者发龙[上海站]选择，助力飞翔
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        基础知识
                                    </span>
                                    <a href="#">
                                        支付API使用指南
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        基础知识
                                    </span>
                                    <a href="#">
                                        前端API使用指南（二）
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        接入流程
                                    </span>
                                    <a href="#">
                                        腾讯开发平台合作的那些人和那些事
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="study-box-content fl">
                            <h3>
                                <img src="./images/product.jpg" alt="">
                                <span>应用接入</span>
                            </h3>
                            <img class="fl" src="./images/pro.jpg" alt="">
                            <p class="caption fl">
                                腾讯开发者沙龙[上海站]圆桌对话...
                            </p>
                            <p class="caption-p fl">
                                圆桌对话：腾讯开放策略下，游戏开发者如何获益？
                            </p>
                            <ul class="app-list fl">
                                <li>
                                    <span>
                                        产品策划
                                    </span>
                                    <a href="#">
                                        腾讯开发者发龙[上海站]选择，助力飞翔
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        基础知识
                                    </span>
                                    <a href="#">
                                        支付API使用指南
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        基础知识
                                    </span>
                                    <a href="#">
                                        前端API使用指南（二）
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        接入流程
                                    </span>
                                    <a href="#">
                                        腾讯开发平台合作的那些人和那些事
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="study-box-content fl">
                            <h3>
                                <img src="./images/running.jpg" alt="">
                                <span>运营推广</span>
                            </h3>
                            <img class="fl" src="./images/run.jpg" alt="">
                            <p class="caption fl">
                                腾讯开发者沙龙[上海站]圆桌对话...
                            </p>
                            <p class="caption-p fl">
                                圆桌对话：腾讯开放策略下，游戏开发者如何获益？
                            </p>
                            <ul class="app-list fl">
                                <li>
                                    <span>
                                        营销推广
                                    </span>
                                    <a href="#">
                                        腾讯开发者发龙[上海站]选择，助力飞翔
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        基础知识
                                    </span>
                                    <a href="#">
                                        支付API使用指南
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        基础知识
                                    </span>
                                    <a href="#">
                                        前端API使用指南（二）
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        接入流程
                                    </span>
                                    <a href="#">
                                        腾讯开发平台合作的那些人和那些事
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="study-box-content fl">
                            <h3>
                                <img src="./images/cloud.jpg" alt="">
                                <span>腾讯云服务</span>
                            </h3>
                            <img class="fl" src="./images/clo.jpg" alt="">
                            <p class="caption fl">
                                腾讯开发者沙龙[上海站]圆桌对话...
                            </p>
                            <p class="caption-p fl">
                                圆桌对话：腾讯开放策略下，游戏开发者如何获益？
                            </p>
                            <ul class="app-list fl">
                                <li>
                                    <span>
                                        营销推广
                                    </span>
                                    <a href="#">
                                        腾讯开发者发龙[上海站]选择，助力飞翔
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        基础知识
                                    </span>
                                    <a href="#">
                                        支付API使用指南
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        基础知识
                                    </span>
                                    <a href="#">
                                        前端API使用指南（二）
                                    </a>
                                </li>
                                <li>
                                    <span>
                                        接入流程
                                    </span>
                                    <a href="#">
                                        腾讯开发平台合作的那些人和那些事
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 热门课程内容 -->
                    <div class="hotcourse-box fr">
                        <a href="#">
                            <img src="./images/hotcourse.jpg" alt="">
                            <ul class="hotcourse-list">
                                <li class="li1">
                                    吴晓波：中国改革与第五次创...
                                </li>
                                <li class="li2">
                                    全新武器 装备升级（二）
                                    <span>讲师：陈鹏</span>
                                </li>
                                <li class="li3">
                                    腾讯开放平台合作的那些人和...
                                    <span>讲师：张雪</span>
                                </li>
                                <li class="li4">
                                    前端API使用指南（二）
                                    <span>讲师：田嵩</span>
                                </li>
                                <li class="li5">
                                    黄钻助力你在腾讯开放平台走...
                                    <span>讲师：罗飞</span>
                                </li>
                                <li class="li6">
                                    社交网络掘金心术（一）
                                    <span>讲师：郑志昊</span>
                                </li>
                            </ul>
                        </a>
                    </div>
                </div>
                <!-- 开发商分享课程&讲师风采 -->
                <div class="share clearfix">
                    <h2 class="title">
                        开发商分享课程
                    </h2>
                    <h2 class="title-right fr">
                        讲师风采
                    </h2>
                    <!-- 开发商分享课程 -->
                    <div class="share-box fl">
                        <div class="share-top fl">
                            <img  class="fl" src="./images/share1.jpg" alt="">
                            <p class="p1">腾讯开放平台Silo的基本操作</p>
                            <p class="p2">北京火谷网络</p>
                            <p class="p3">着对美术团队培训为出发点，培养更有效率的</p>
                        </div>
                        <div class="share-top fl">
                            <img  class="fl" src="./images/share2.jpg" alt="">
                            <p class="p1">开放平台视频教程之开发调试代码</p>
                            <p class="p2">开发商“兄弟连”友情提供</p>
                            <p class="p3">操作实例系列文章</p>
                        </div>
                        <div class="share-bot fl">
                            <p class="p1">腾讯开放平台项目实例（一）</p>
                            <p class="p2">兄弟连</p>
                            <p class="p3">操作实例系列文章</p>
                        </div>
                        <div class="share-bot fl">
                            <p class="p1">腾讯开放平台项目实例（二）</p>
                            <p class="p2">兄弟连</p>
                            <p class="p3">操作实例系列文章</p>
                        </div>
                        <div class="share-bot fl">
                            <p class="p1">腾讯开放平台项目实例（三）</p>
                            <p class="p2">兄弟连</p>
                            <p class="p3">操作实例系列文章</p>
                        </div>
                    </div>
                    <!-- 讲师风采 -->
                    <div class="teacher-box fr">
                        <div class="teacher fl">
                            <img class="fl" src="./images/name1.jpg" alt="">
                            <p class="p1 fl">杨焕吉</p>
                            <p class="p2 fl">腾讯云大客户经理团队</p>
                            <p class="p3 fl">负责人</p>
                        </div>
                        <div class="teacher fl">
                            <img class="fl" src="./images/name2.jpg" alt="">
                            <p class="p1 fl">党受辉</p>
                            <p class="p2 fl">腾讯游戏运维支撑体系</p>
                            <p class="p3 fl">（蓝鲸）负责人</p>
                        </div>
                        <div class="teacher fl">
                            <img class="fl" src="./images/name3.jpg" alt="">
                            <p class="p1 fl">李伟</p>
                            <p class="p2 fl">TestBird CEO</p>
                            <p class="p3 fl"></p>
                        </div>
                    </div>
                    <!-- 内容底部adv -->
                    <div class="adv fl">
                        <img src="./images/container-banner.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>

        <!-- footer -->
        <div class="footer">
            <div class="w clearfix">
                <div class="footer-left fl">
                    <h3 class="footer-h3">开放平台</h3>
                    <img src="./images/footer.jpg" alt="">
                    <h3 class="footer-h3">合作伙伴</h3>
                    <img src="./images/footer-web.jpg" alt="">
                </div>
                <div class="footer-right fr">
                    <h3 class="footer-h3">收听微博</h3>
                    <div class="btn">
                        <i class="iconfont icon-artboard37"></i>
                        <span>开放平台学院</span>
                    </div>
                    <h3 class="footer-h3">关注空间</h3>
                    <div class="btn">
                        <i class="iconfont icon-qqkongjian"></i>
                        <span>开放平台学院</span>
                    </div>
                    <h3 class="footer-h3">小调查</h3>
                    <p class="how">您对全新上线的腾讯大学网站是否满意呢?</p>
                    <input type="radio" name="how">很满意
                    <input type="radio" name="how">一般，没感觉
                    <input type="radio" name="how">很不好<br>
                    <input type="button" value="提交" class="submit">
                    <a href="#" class="result">查看结果</a>
                </div>
                <div class="footer-bottom fl">
                    <ul class="footer-bottom-list">
                        <li>
                            <a href="#">服务协议|</a>
                        </li>
                        <li>
                            <a href="#">隐私政策|</a>
                        </li>
                        <li>
                            <a href="#">版权保护投诉指引</a>
                        </li>
                    </ul>
                    <p>Copyright © 1998-2020 Tencent. All Rights Reserved.</p>
                    <p>腾讯公司 版权所有</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>